<template>
  <div class="page" :class="'sub-bg' + data.type">
    <m-header :title="title"></m-header>
    <div class="page-content">
      <div class="user_info">
        <div class="l">
          <img :src="require('../assets/images/tou/'+ data.u_img +'.png')" alt="">
          <p>{{data.u_name}}</p>
					<!-- 删除秘密按钮 -->
					<div class="del" v-if="data.m_uid == userInfo.id" @click="delMimi(data.id)">
						<img src="../assets/images/ico_del.png" alt="">
					</div>
        </div>
        <p class="time">{{data.add_time}}</p>
      </div>
      <div class="intro">
        <p>{{data.content}}</p>
      </div>
      <!-- 赞 -->
      <div class="zan-content" @click="toZan">
        <img v-if="data.hasdot == 0" src="../assets/images/ico_zan.png" alt="">
        <img v-else src="../assets/images/ico_zan_on.png" alt="">
        <p :style="{color: data.hasdot != 0 ? '#13227a' : '#fff'}">{{data.dot_num}}</p>
      </div>
			
      <!-- 评论 -->
      <div class="comment-content">
        <div class="head">
          <h3>全部评论({{data.comments_num}})</h3>
        </div>
        <div class="content">
          <ul>
            <li v-for="(item, index) in comment_list" :key="index">
              <div class="comm-head">
                <div class="l">
                  <img :src="require('../assets/images/tou/'+ item.u_img +'.png')" alt="">
                  <p>{{item.u_name}}</p>
									<!-- 删除评论按钮 -->
									<div class="del" v-if="item.u_id == userInfo.id" @click="delDot(item)">
										<img src="../assets/images/ico_del.png" alt="">
									</div>
                </div>
                <p class="time">{{item.add_time}}</p>
              </div>
              <div class="text"><p v-html="item.content"></p></div>
            </li>
          </ul>
					<div class="no_data" v-if="comment_list.length == 0">
						<p>暂无相关评论</p>
					</div>
        </div>
      </div>
    </div>
    <!-- 底部评论框 -->
    <div class="footer">
      <div class="footer-content">
        <p @click="showCommPop = true">{{comm_val ? comm_val : '我来说两句...'}}</p>
        <img @click="openMeme" src="../assets/images/ico_meme.png" alt="">
      </div>
    </div>
    <!-- 弹出评论框 -->
    <div class="comm-pop" v-show="showCommPop">
      <div class="comm-pop-bg" @click="showCommPop = false"></div>
      <div class="comm-pop-content">
        <div class="head">
          <p v-if="comm_val" style="color: #3F51B5;" @click="sendComm">发送</p>
          <p v-else style="opacity: .5;">发送</p>
        </div>
        <textarea placeholder="我来说两句..." v-model="comm_val" maxlength="70"></textarea>
        <div class="ico_meme" @click="openMeme">
          <img class="" src="../assets/images/ico_meme.png" alt="">
        </div>
      </div>
      <div class="meme-pop" v-show="showMeme">
        <ul>
          <li v-for="(item, index) in meme" :key="index"><p>{{item}}</p></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      showCommPop: false,
      showMeme: false,
      meme: [
        '😁', '😂', '😃', '😄', '😉', '😊', '😍', '😏', 
        '😘', '😝', '😰', '😢', '😣', '😲', '😭', '🤓', 
        '😎', '😎', '🙄', '🤗', '😩', '😤', '😛', '🤒', 
        '👻', '💩', '💀', '👽', '😬', '😦', '😵', '😀', 
        '👏', '👍', '👎', '👆', '👇', '👈', '👉', '👌'
      ],
      title: 'MImi详情',
      data:{u_img: 1},
      comment_list: [],
      comm_val: ''
    }
  },
  computed: {
		...mapState(['hasLogin', 'userInfo'])
  },
  methods: {
		// 删除秘密
		delMimi(id){
			this.$msgBox.showMsgBox('确定要删除该Mimi吗？').then((val) => {
				this.$loading.show();
				this.$http.del_mimi({
					token: this.userInfo.token,
					u_id: this.userInfo.id,
					m_id: id
				}).then((res) => {
					this.$loading.hide();
					console.log('删除评论结果',res);
					if(res.code == 0){
						this.$toast(res.msg);
						this.$router.goBack();
					} else {
						this.$toast(res.msg);
					}
				})
				
			}).catch(() => {
				// console.log('点了取消');
			});
		},
		// 删除评论
		delDot(item){
			this.$msgBox.showMsgBox('确定要删除该评论吗？').then((val) => {
				this.$loading.show();
				this.$http.del_comment({
					token: this.userInfo.token,
					u_id: this.userInfo.id,
					c_id: item.id
				}).then((res) => {
					this.$loading.hide();
					console.log('删除评论结果',res);
					if(res.code == 0){
						this.$toast(res.msg);
						this.getComm();
					} else {
						this.$toast(res.msg);
					}
				})
				
			}).catch(() => {
				// console.log('点了取消');
			});
		},
		//获取mimi数据
		getData(){
			let params = {
				token: this.userInfo.token,
				u_id: this.userInfo.id,
				m_id: this.$route.params.id
			}
			this.$loading.show();
			this.$http.message_det(params).then((res) => {
				this.$loading.hide();
				console.log(res);
				if(res.code === 0){
					this.data = res.data;
				} else {
					this.$toast(res.msg);
				}
			})
		},
		// 点击表情
    openMeme () {
      this.$toast('表情功能暂未开发😊');
    },
		// 获取评论列表
		getComm(){
			let params = {
				token: this.userInfo.token,
				u_id: this.userInfo.id,
				m_id: this.$route.params.id
			}
			this.$http.get_comment(params).then((res) => {
				if(res.code == 0){
					console.log('获取评论',res);
					this.comment_list = res.data;
				} else {
					this.comment_list = [];
				}
			})
		},
		// 点击发送评论
    sendComm () {
      this.showCommPop = false;
			this.$loading.show();
			let params = {
				token: this.userInfo.token,
				u_id: this.userInfo.id,
				m_id: this.$route.params.id,
				content: this.comm_val
			}
			this.$http.to_comment(params).then((res) => {
				console.log('发布评论',res);
				this.$loading.hide();
				if(res.code == 0){
					this.data.comments_num = this.data.comments_num + 1;
					this.$toast(res.msg);
					this.comm_val = '';
					this.getComm();
				} else {
					this.$toast(res.msg);
				}
			})
    },
		// 点赞
    toZan () {
			let num = this.data.hasdot;
			let params = {
					token: this.userInfo.token,
					u_id: this.userInfo.id,
					m_id: this.$route.params.id
				}
			if(num == 0){
				// 未点赞过的
				this.$http.dot(params).then((res) => {
					if(res.code == 0){
						console.log(res);
						this.data.hasdot = 1;
						this.data.dot_num = this.data.dot_num + 1;
					}
				})
			} else {
				// 已经点赞
				this.$http.del_dot(params).then((res) => {
					if(res.code == 0){
						console.log(res);
						this.data.hasdot = 0;
						this.data.dot_num = this.data.dot_num > 0 ? this.data.dot_num - 1 : 0;
					}
				})
			}
    }
  },
  mounted () {
		this.getData();
		this.getComm();   
  }
}
</script>

<style scoped lang="scss">
@import 'styles/common.scss';
.page{
  min-height: 100vh;
  padding-bottom: rem(80);
}
.page-content{
  margin-top: rem(20);
  width: calc(100% - 24px);
  margin-left: 12px;
  color: #fff;
  .user_info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .l{
      display: flex;
      justify-content: flex-start;
      align-items: center;
			.del{
				padding-bottom: rem(10);
				margin-left: rem(10);
				img{
					width: rem(40);
					height: rem(40);
				}
			}
      img{
        width: rem(80);
        height: rem(80);
        border-radius: 50%;
        margin-right: rem(20);
      }
      p{
        font-weight: bold;
        font-size: rem(30);
        color: #3f51b5;
      }
    }
    .time{
      font-size: rem(24);
      opacity: .8;
    }
  }
  .intro{
    text-align: left;
    margin-top: rem(50);
    line-height: rem(44);
  }
  .zan-content{
    margin: rem(60) 0;
    img{
      width: rem(60);
    }
    p{
      margin-top: rem(20);
      font-size: rem(34);
      font-weight: bold;
    }
    &:active img{
      opacity: .6;
    }
  }
  .comment-content{
    .head{
      padding-bottom: rem(40);
      border-bottom: 1px #eee solid;
      h3{
        text-align: left;
        font-size: rem(34);
        font-weight: bold;
      }
    }
    .content{
      margin-top: rem(40);
      ul{
        li{
          margin-bottom: rem(60);
          .comm-head{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .l{
              display: flex;
              justify-content: flex-start;
              align-items: center;
              img{
                width: rem(60);
                height: rem(60);
                border-radius: 50%;
                margin-right: rem(20);
              }
              p{
                font-weight: bold;
                font-size: rem(28);
                color: #3f51b5;
              }
							.del{
								padding-bottom: rem(10);
								margin-left: rem(10);
								img{
									width: rem(40);
									height: rem(40);
								}
							}
            }
            .time{
              font-size: rem(24);
              opacity: .8;
            }
          }
          .text{
            margin-top: rem(20);
            margin-left: rem(60);
            text-align: left;
            line-height: rem(40);

          }
        }
      }
    }
  }
}
.footer{
  .footer-content{
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: calc(100% - 60px);
    border-radius: rem(20) rem(20) 0 0;
    padding: 0 30px;
    height: rem(80);
    background: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    p{
      text-align: left;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: #f5f5f5;
      height: rem(50);
      line-height: rem(50);
      border-radius: rem(50);
      color: #999;
      font-size: rem(24);
      width: rem(400);
    }
    img{
      margin-left: rem(40);
      width: rem(40);
    }
  }
}
.comm-pop{
  .comm-pop-bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    background: rgba(0,0,0,.7);
  }
  .comm-pop-content{
    background: #fff;
    position: fixed;
    // bottom: rem(500);
    bottom: 0;
    left: 0;
    z-index: 13;
    width: calc(100% - 60px);
    padding: 0 30px;
    border-radius: rem(20) rem(20) 0 0;
    .head{
      height: rem(100);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-size: rem(30);
    }
    textarea{
      background: #f5f5f5;
      width: calc(100% - 20px);
      padding: 10px;
      height: rem(120);
      border-radius: rem(20);
      color: #484848;
    }
    .ico_meme{
      text-align: right;
      margin-top: rem(10);
      margin-bottom: rem(10);
      img{
        width: rem(50);
      }
    }
  }
  .meme-pop{
    padding-top: rem(40);
    position: fixed;
    bottom: 0;
    height: rem(460);
    left: 0;
    z-index: 14;
    width: 100%;
    background: #fff;
    margin-top: rem(40);
    ul{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
    }
    li{
      width: calc(100% / 7);
      margin-bottom: rem(40);
      font-size: rem(38);
    }
  }
}
</style>
